<template>
	<view class="SendCode">
		<uv-code ref="uCode" @change="e=>tips=e" seconds="60" changeText="X秒重新获取"></uv-code>
		<uv-button @click="getCode" plain color="#31c0ed" :text="tips"  size="normal"
		:customStyle="{border:'none !important'}"></uv-button>

	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import { http } from '@/common/http/index';
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { defineProps } from 'vue';

	// 使用defineProps定义接收的props  
	const props = defineProps({
		phone: {
			type: String,
			default: ''
		},
		sence: {
			type: String,
			default: ''
		}
	});

	const tips = ref('');
	const uCode = ref();

	const getCode = () => {

		if (!props.phone) return toast("请输入手机号")

		if (uCode.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})

			http.post(`/sms/code/${props.phone}/${props.sence}`, { custom: { loading: true } })
				.then((res : any) => {
					console.log('res', res)
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCode.value.start();
				})
				.catch((err) => { uni.hideLoading(); });

		} else {
			toast('倒计时结束后再发送');
		}
	};
</script>
<style lang="scss" scoped>
	.SendCode {

		:deep(.uv-button--hairline) {
			border-width: 0 !important;
			padding: 0;
		}
		:deep(.uv-button__text) {
			font-weight: 500;
			font-size: 30rpx  !important;
			color: #31C0ED;
		}
	}
</style>